<!doctype html>
<html>
<head>
<title>Opal M10 HD</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style type="text/css">
/*Layout*/
body{
	margin:0;
	padding:0;
	width:100%;
  direction: ltr;
	font-size:13px;
	font-family:sans-serif;
  min-height:480px;
}

#view{
bottom: 25px;
position: absolute;
top: 35px;
width: 100%;
}
#top{
height:35px;
}
#top h1{
height:35px;
margin:0;
}
#bottom{
bottom: 0px;
height: 25px;
margin-bottom: 1px;
position: absolute;
width: 100%;
}

.left-con{
height: 100%;
position: absolute;
width: 320px;
}
.right-con{
height: 100%;
left: 320px;
position: absolute;
right: 0px;
}

.photo{
-webkit-box-shadow: black 1px 1px 3px;
-webkit-transform: rotate(7deg);
-moz-box-shadow: black 1px 1px 3px;
-moz-transform: rotate(7deg);
background: white;
float: left;
margin: 5px;
padding: 5px;
}
.photo img{
  display:block;
  border:0;
}
.v-con{
overflow: hidden;
position: absolute;
width: 100%;
top:0;
bottom:0;
}
.clear{
clear:both;
}

</style>
<script type="text/javascript">
window.onload = function(){
  var pItems = document.getElementById("pList").getElementsByTagName("a");
  for(var i = 0; i < pItems.length; i++){
  	pItems[i].onclick = function(){
  		document.getElementById("photoView").setAttribute("src",this.getAttribute("href"));
	    return false;
  	}
  }
}
</script>
</head>
<body>
	<div id="top">
		<h1>Opal M10 HD</h1>
	</div>
<div id="view">
  <div class="left-con" style="background:#AAA;">
    <div class="v-con">
      <div class="p-con" id="pList">
      {% for photoset in photosets %}
      <p class="photoset">{{ photoset.title }}</p>
        {% for photo in photoset.photolist %}<a href="{{ photo.photoUrl }}" class="photo" target="_blank"><img src="{{ photo.photoS }}"/></a>{% endfor %}
        <div class="clear"></div>
      {% endfor %}
      </div>
    </div>
  </div>
  <div class="right-con" style="background:#BBB;">
  	<div class="v-con">
  	  <img src="" alt="" id="photoView"/>
  	</div>
  </div>
</div>
	<div id="bottom">
		&copy;
	</div>
<script type="text/javascript">
  var pItems = document.getElementById("pList").getElementsByTagName("a");
  for(var i = 0; i < pItems.length; i++){
  	pItems[i].onclick = function(){
  		document.getElementById("photoView").setAttribute("src",this.getAttribute("href"));
	    return false;
  	}
  }
</script>
</body>
</html>